<script lang="ts" setup>
import { useAdminUserStore } from "../store/adminUser"
import AddDialog from "./AddDialog.vue"
import { SearchIcon } from "tdesign-icons-vue-next"
import DeleteDialog from "./DeleteDialog.vue"
import { columns } from "../attribute/columns"
import ResetDialog from "./ResetDialog.vue"

const { table, addDialog, editDialog, deleteDialog } = useAdminUserStore()
</script>

<template>
  <t-row class="container">
    <t-card style="width: 100%">
      <t-space>
        <t-input v-model="table.searchData" placeholder="[应用名] [授权主体]" size="small"
                 @enter="table.search">
          <template #suffixIcon>
            <search-icon />
          </template>
        </t-input>
        <t-button size="small" theme="primary" @click="table.search">
          搜索
        </t-button>
        <t-button size="small" theme="primary" variant="outline" @click="addDialog.visible = true">
          添加
        </t-button>
        <t-button size="small" theme="primary" variant="outline" @click="deleteDialog.isGroupEmpty">
          删除
        </t-button>
        <t-button size="small" theme="primary" variant="outline" @click="table.refresh()">
          刷新
        </t-button>
      </t-space>
      <t-divider />
      <t-table
        :key="table.key"
        :columns="columns"
        :data="table.data"
        :loading="table.loading"
        :pagination="{ defaultCurrent: 1, defaultPageSize: 10, total: table.data.length }"
        :selected-row-keys="deleteDialog.ids"
        cellEmptyContent="—"
        empty="暂无数据"
        hover
        row-key="id"
        stripe
        table-layout="fixed"
        @select-change="deleteDialog.idsChange"
      >

        <template #status="{row}">
          <t-switch v-model="row.status" :customValue="[1,0]" size="small"
                    ></t-switch>
        </template>



        <template #operate="{row}">
          <t-button class="item" size="small" variant="outline" @click="editDialog.formDataAssign(row)">重置
          </t-button>
          <t-button class="item" size="small" variant="outline" @click="deleteDialog.delete(row.id)">删除
          </t-button>
        </template>
      </t-table>
    </t-card>
  </t-row>
  <AddDialog />
  <ResetDialog />
  <DeleteDialog />
</template>

<style lang="less" scoped>
@border-color: var(--td-component-border);
.container {
  border: @border-color 1px solid;
  padding: 10px;
  margin: 10px 0;
}

.item {
  margin: 0 5px;
}
</style>
